<template>
    <div>
        <el-dialog :title="!form.id ? '创建角色信息' : '更新角色信息'" :visible.sync="roleDialogVisiable" width="50%"
            @close="resetForm('roleRef')" :close-on-click-modal="false">
            <!-- 内容主题区 -->
            <el-form ref="roleRef" :model="form" :rules="formRules" label-width="70px">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="form.roleName" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="form.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="roleDialogVisiable = false">取 消</el-button>
                <el-button v-if="!form.id" @click="resetForm('roleRef')">重 置</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        getRolesList: {
            type: Function,
            default: null,
        }
    },
    data() {
        return {
            form: { // 角色表单数据对象
                roleName: '',
                roleDesc: '',
            },
            roleDialogVisiable: false,
            isDisabled: false,
            formRules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                ],
                roleDesc: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        initFormData(value) {
            console.log('vaku:' + JSON.stringify(value));
            this.isDisabled = false
            if (value && value.id != null) {
                this.form = JSON.parse(JSON.stringify(value))
                this.isDisabled = true
                console.log('form是：' + JSON.stringify(this.form))
            }
            console.log('role表单初始化：' + JSON.stringify(value))
            this.roleDialogVisiable = true
        },
        resetForm(refName) {
            this.form = {
                roleName: '',
                roleDesc: ''
            }
            this.$refs[refName].resetFields()
        },
        submitForm() {
            this.$refs.roleRef.validate(async (valid) => {
                console.log('校验：' + valid)
                if (!valid) return
                if (this.form && this.form.id != '') { // 更新角色
                    const res = await this.$http.put('roles/' + this.form.id, this.form)
                    if (res.meta.status != 200) return this.$message.error('角色信息更新失败')
                    this.$message.success('角色信息更新成功')
                    this.getRolesList() // 调用父组件里的方法
                    this.roleDialogVisiable = false

                } else { // 创建角色信息
                    const res = await this.$http.post('roles', this.form)
                    if (res.meta.status != 201) return this.$message.error('角色创建失败')
                    this.$message.success('角色创建成功')
                    this.getRolesList() // 调用父组件里的方法
                    this.roleDialogVisiable = false
                }
            })
        },
        delRole(row) { // 删除角色信息
            this.$confirm('是否删除该用户信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await this.$http.delete(`roles/${row.id}`)
                console.log('角色ID：' + JSON.stringify(row))
                if (res.meta.status != 200) return this.$message.error('角色删除失败')
                this.$message.success('角色删除成功')
                this.getRolesList()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        removeRightById(role, rightID) { // 删除权限信息
            this.$confirm('是否删除该角色权限?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await this.$http.delete(`roles/${role.id}/rights/${rightID}`)
                if (res.meta.status != 200) return this.$message.error('删除角色权限失败')
                this.$message.success('删除角色权限成功')
                // this.getRolesList()
                role.children = res.data
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            })
        },
    },
}
</script>

<style lang="less" scoped>

</style>